<template>
    <el-dialog v-model="show" title="推广" width="800px">
        <div class="content">
            <div class="content-item">
                <div class="item-title">方式一：设置入群欢迎语</div>
                <div class="item-desc">
                    群主可将打卡话术设置成入群欢迎语，在新用户进入群聊之后将推送该打卡活动的欢迎语，让新用户也能快速参与到我们的打卡活动中来
                </div>
                <div class="item-button">
                    <el-button type="primary" text @click="onCopyScript">复制活动话术</el-button>
                </div>
            </div>
            <div class="content-item">
                <div class="item-title">方式二：添加到群公告</div>
                <div class="item-desc">
                    群主可将打卡话术添加到群公告中，方便群内的成员使用，以免社群太活跃，导致刚发出去没多久的打卡通知被刷上去了，而导致客户看不到活动说明
                </div>
                <div class="item-button">
                    <el-button type="primary" text @click="onCopyScript">复制活动话术</el-button>
                </div>
            </div>
            <div class="content-item">
                <div class="item-title">
                    方式三：一键群发至客户群
                    <span>（<span class="tips-icon">*</span>每个客户群每天最多可以收到1条企业的群发消息）</span>
                </div>
                <div class="item-desc">
                    企业管理员在SCRM后台创建群发任务，员工收到群发通知，将活动话术发送至用户群中，邀请客户参与
                </div>
                <div class="item-button">
                    <el-button type="primary" text @click="onCopyScript">复制活动话术</el-button>
                </div>
            </div>
            <div class="content-item">
                <div class="item-title">
                    方式四：在企微后台配置自动回复
                    <span>（<span class="tips-icon">*</span>小程序链接有效期为30天，失效后请重新复制）</span>
                </div>
                <div class="item-desc">
                    登录企业微信管理后台，在【客户与上下游】-【聊天工具】-【自动回复】中，将推广链接设置为打卡自动回复语。群成员可以每天在群聊中@小助理，发送打卡口令，如“签到”，在群内打卡成功，并收到打卡记录查看链接
                </div>
                <div class="item-button">
                    <el-button type="primary" text @click="onCopyPassword">复制打卡口令</el-button>
                    <span class="item-button-line">|</span>
                    <el-button type="primary" text @click="onCopyLink">复制打卡查询链接</el-button>
                </div>
            </div>
        </div>
    </el-dialog>
</template>
<script setup lang="ts">
import useClipboard from 'vue-clipboard3';
import { ElMessage } from 'element-plus';
import { ref, computed, watch } from 'vue';
import { getUrlLink, punchCardDetail } from '@/api/smartMarketing/community/communityCheckIn';

const emit = defineEmits(['update:modelValue']);

const { toClipboard } = useClipboard();

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
    id: {
        type: [String, Number],
        default: ''
    }
});

const show = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

watch(
    () => props.modelValue,
    val => {
        val && initData();
    }
);

const baseInfo = ref<any>({});

/**
 * 复制话术
 */
const onCopyScript = async () => {
    const text = baseInfo.value.speechcraft;
    onCopy(text);
};

/**
 * 复制打卡口令
 */
const onCopyPassword = async () => {
    const text = baseInfo.value.clock_password;
    onCopy(text);
};

/**
 * 复制链接查询
 */
const onCopyLink = async () => {
    const { url_link } = await getUrlLink({ activity_id: props.id });
    onCopy(url_link);
};

/**
 * 复制
 * @param val 复制文本内容
 */
const onCopy = async (text: string) => {
    try {
        await toClipboard(text);
        ElMessage.success('复制成功');
    } catch (e) {
        ElMessage.error('复制失败');
    }
};

/**
 * 初始化数据
 */
const initData = async () => {
    const res: any = await punchCardDetail({ activity_id: props.id });
    baseInfo.value = res;
};
</script>
<style lang="scss" scoped>
.content-item {
    margin-bottom: 16px;
    padding: 16px;
    background: #f7f7f7;
    border-radius: 4px;

    .item-title {
        display: flex;
        align-items: center;
        color: #333;
        font-size: 16px;
        font-family: PingFangSC-Medium, 'PingFang SC';
        font-weight: 500;

        &::before {
            width: 3px;
            height: 16px;
            margin-right: 6px;
            content: '';
            border-radius: 2px;
            background-color: #ff6b00;
        }

        span {
            padding-left: 4px;
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #f70000;
            line-height: 16px;
        }

        .tips-icon {
            // color: #ff6b00;
        }
    }

    .item-desc {
        padding: 16px 0;
        font-size: 14px;
        font-family: PingFangSC-Regular, 'PingFang SC';
        font-weight: 400;
        color: #696969;
        line-height: 20px;
    }

    .item-button {
        button {
            padding: 0;
            height: 14px;
        }

        .item-button-line {
            display: inline-block;
            margin: 0 16px;
            color: #eaeaea;
            font-size: 14px;
        }
    }
}
</style>
